<template>
  <ul v-if="list.length">
    <li
      v-for="(item, index) in list"
      :key="index"
      :class="mark == 'claimsDetail' ? 'liBox results' : 'results'"
    >
      <i class="el-icon-document links"></i>
      <span
        :class="mark == 'claimsDetail' ? 'nameSty name' : 'name'"
        :title="item.name || getName(item.url)"
        >{{ item.name || getName(item.url) }}</span
      >
      <span :class="mark == 'claimsDetail' ? 'butClass' : ''">
        <el-link
          type="primary"
          class="look"
          v-if="!checkImg(item)"
          @click="lookResult(item.url)"
          >查看</el-link
        >
        <div class="previewBox" v-if="checkImg(item)">
          <el-link type="primary" @click="lookResultImg(item.url, item.id)"
            >查看</el-link
          >
          <el-image
            class="previewImg"
            style="width: 56px; height: 0px"
            :src="src"
            :preview-src-list="[src]"
            :id="item.id"
          ></el-image>
        </div>
        <el-link
          type="primary"
          class="look"
          v-if="showDownload"
          @click="download(item.path, item.name)"
          >下载附件</el-link
        >
        <el-link
          type="danger"
          class="look"
          v-if="showDelete"
          @click="deleteResult(index)"
          >删除</el-link
        >
      </span>
    </li>
  </ul>
</template>
<script>
import common from '../../kits/common'
export default {
  data() {
    return {
      list: this.resultList,
      centerDialogVisible: false,
      src: '',
    }
  },
  props: {
    resultList: {
      type: Array,
    },
    typePage: {
      type: String,
    },
    showDelete: {
      type: Boolean,
      default: true,
    },
    showDownload: {
      type: Boolean,
      default: false,
    },
    mark: {
      type: String,
    },
    id: {
      type: String,
    },
  },
  watch: {
    resultList(val) {
      this.list = val
      // console.log(this.list)
    },
  },
  methods: {
    download(path, name) {
      window.open(
        common.commonApi +
          'api-f/files/downloadtolocal?url=' +
          path +
          '&fileName=' +
          name
      )
    },
    deleteResult(index) {
      if (!this.typePage && this.typePage !== 'caseDetailLzh') {
        this.list.splice(index, 1)
      }
      if (this.mark == 'enclosure') {
        this.$emit('callBackResult', this.list, this.id)
      } else {
        this.$emit('callBackResult', this.list)
      }
    },
    checkImg(item) {
      var str = item.name || this.getName(item.url)
      if (str) {
        let arr = str.split('.')
        let name = arr[arr.length - 1]
        if (['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG'].includes(name)) {
          return true
        }
      }
      return false
    },
    //放大图片id 唯一，不然放大有问题
    lookResultImg(url, id) {
      this.src = url
      setTimeout(() => {
        $('#' + id).click()
      }, 300)
    },
    lookResult(url) {
      window.open(url)
    },
    getName(url) {
      if (url) {
        const fileName = url.lastIndexOf('/') // 取到文件名开始到最后一个点的长度
        const fileNameLen = url.length // 取到文件名长度
        const fileType = url.substring(fileName + 1, fileNameLen) // 截
        return fileType
      }
    },
  },
}
</script>
<style lang="less" scoped>
ul {
  max-width: 730px;
  margin-left: 164px !important;
  padding-bottom: 22px;
  margin-top: -14px;
}
.liBox {
  position: relative;
}
.butClass {
  position: absolute;
  right: 10px;
}
.results {
  display: inline-block;
  padding-left: 4px;
  width: 330px;
  height: 26px;
  line-height: 26px;
  // &:nth-child(2n){
  margin-right: 34px;
  // }
  &:hover {
    background-color: #f5f7fa;
    .name {
      color: #409eff;
    }
  }
}
.links {
  color: #909399;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  margin-right: 7px;
}
.name {
  width: 200px;
  display: inline-block;
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.nameSty {
  width: 200px !important;
}
.look {
  margin-left: 15px;
  display: inline-block;
  vertical-align: middle;
}
.previewBox {
  display: inline-block;
  // width: 56px;
  // height: 20px;
  position: relative;
  margin-left: 15px;
  .previewImg {
    position: absolute;
    top: 25px;
    left: 0;
    cursor: pointer;
    /deep/.el-image__preview {
      opacity: 1;
    }
  }
  /deep/.el-upload-list {
    display: none;
  }
}
</style>
